<template>
  <div class="advancedForm-container common-container">
    <div class="form-card-container">
      <el-card class="form-card-content">
        <template #header>
          <div class="card-header">
            <span style="margin-right: 100px">收缩表单 通过v-show来控制显隐藏</span>
            <el-button @click="showRow(2)" type="text">显示两行</el-button>
            <el-button @click="showRow(1)" type="text">显示一行</el-button>
          </div>
        </template>
        <advancedForm
          :columns="columns"
          :showRow="row"
          @onSubmit="onSubmit"
        />
      </el-card>
      <el-card class="form-card-content">
        <template #header>
          <div class="card-header">
            <span style="margin-right: 100px">收缩表单 通过高度来控制显隐藏</span>
          </div>
        </template>
        <advancedForm
          :columns="columns"
          :byHeight="true"
          @onSubmit="onSubmit"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import advancedForm from '@/components/advancedForm/index'
export default {
  name: 'index',
  components:{
    advancedForm,
  },
  data(){
    return{
      row: 1,
      columns: [
        {
          type: 'input',
          name:"name1",
          title:'字段1',
          placeholder: "字段1",
          span: 8,
        },
        {
          type: 'date',
          name:"name2",
          title:'字段2',
          placeholder: "字段2",
          span: 8,
        },
        {
          type: 'input',
          name:"name3",
          title:'字段3',
          placeholder: "字段3",
          span: 8,
        },
        {
          type: 'input',
          name:"name4",
          title:'字段4',
          placeholder: "字段4",
          span: 8,
        },
        {
          type: 'input',
          name:"name5",
          title:'字段5',
          placeholder: "字段5",
          span: 8,
        },
        {
          type: 'input',
          name:"name6",
          title:'字段6',
          placeholder: "字段6",
          span: 8,
        },
        {
          type: 'input',
          name:"name7",
          title:'字段7',
          placeholder: "字段7",
          span: 8,
        },
        {
          type: 'input',
          name:"name8",
          title:'字段8',
          placeholder: "字段8",
          span: 8,
        },
        {
          type: 'input',
          name:"name9",
          title:'字段9',
          placeholder: "字段9",
          span: 8,
        }
      ],
    }
  },
  methods:{
    // 显示行数
    showRow(num){
      this.row = num
    },
    onSubmit(){

    },
  }
}
</script>

<style lang="scss" scoped>
.form-card-content{
  text-align: left;
}
.form-card-content{
  margin-bottom: 50px;
}
</style>
